<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生页面</title>
    <style>
        /* *********************标题样式************************* */
        .titleH1{
            text-align: center;
        }

        /* *********************表格样式************************** */
        .dataTable{
            margin: 0 auto; /* 外边距 */
            width: 70%;
        }

        /* >找子标签 空格找后代 */
        .dataTable , .dataTable th ,.dataTable td{
            border: solid 1px green;
            border-collapse: collapse;
        }

        /* *********************页码样式************************** */
        .pageUl{
            text-align: center;
        }

        .pageUl li{
            display: inline-block; /* 块元素  行内元素  行内块 */
        }

        .pageUl a{
            width: 30px;
            display: inline-block;
            height: 30px;
            text-align: center;
            line-height: 30px;
            text-decoration: none;
            border: solid 1px green;
        }

        .other{
            background-color: darkseagreen;
            color: white;
        }

        .now{
            color: darkseagreen;
            background-color: white;
        }

        /* ***********弹出框的样式**************** */
        .dialog{
            background-color: aliceblue;
            border: solid 1px green;
            width: 250px;
            padding: 10px;
            position: absolute;
            top: 100px;
            left: 40%;
            display: none;  /* 不显示 */
        }


        #showAddDialogBt{
            margin-left: 15%;
        }

    </style>
</head>
<body>
    <!-- *****************************标题********************************** -->
    <div>
        <h1 class="titleH1">学生信息表</h1>
    </div>

    <div>
        <button id="showAddDialogBt">添加学生</button>
    </div>

    <!-- **********************************学生表格********************************** -->
    <div>
        <table class="dataTable" id="stuTable">
            <thead>
            <tr>
                <th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>专业</th><th>生日</th><th>操作</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

    <!-- **************************页码*************************** -->
    <div>
        <ul class="pageUl">
            <li><a href='javascript:;' class='now pageBt'>0</a></li>
        </ul>
    </div>

    <!-- *************************添加学生的表单****************************** -->
    <div class="dialog" id="addDialog">
        <div class="top">添加学生</div>
        <div class="middle">
            <form action="javascript:;" id="stuAddForm">
                学生姓名:<input type="text" name="sname"><br>
                学生年龄:<input type="number" min="1" name="age"><br>
                学生性别:<input type="radio" name="gender" value="0" checked>男
                        <input type="radio" name="gender" value="1">女<br>
                学生专业:
                <select name="major">
                    <option>Java</option>
                    <option>Python</option>
                    <option>C++</option>
                </select>
                <br>
                学生生日:<input type="date" name="birthday"><br>
                <input type="button" value="确认添加" id="stuAddBt">
            </form>
        </div>
    </div>


    <!-- *************************修改学生的表单****************************** -->
    <div class="dialog" id="updateDialog">
        <div class="top">修改学生</div>
        <div class="middle">
            <form action="javascript:;" id="stuUpdateForm">
                <input type="hidden" name="id">
                学生姓名:<input type="text" name="sname"><br>
                学生年龄:<input type="number" min="1" name="age"><br>
                学生性别:<input type="radio" name="gender" value="0" checked>男
                <input type="radio" name="gender" value="1">女<br>
                学生专业:
                <select name="major">
                    <option>Java</option>
                    <option>Python</option>
                    <option>C++</option>
                </select>
                <br>
                学生生日:<input type="date" name="birthday"><br>
                <input type="button" value="确认修改" id="stuUpdateBt">
            </form>
        </div>
    </div>



    <script src="js/jquery-1.7.2.js"></script>
    <script>

        $(document).ready(function (){

            //********************让添加窗口显示的按钮*********************************
            $("#showAddDialogBt").click(function (){
                $("#addDialog").show(); // display : block
            })

            //********************监听添加学生按钮的点击****************************
            $("#stuAddBt").click(function (){
                //收集表单中的参数   sname=xxx&age=20&gender=0....
                // let params = $("#stuAddForm").serialize();
                // console.log(params);

                // {"sname":"赵云","age":20.....}

                let sname = $("#stuAddForm input[name='sname']").val();
                let age = $("#stuAddForm input[name='age']").val();
                let gender = 0;
                $("#stuAddForm input[name='gender']").each(function (index,genderInput){
                    if(genderInput.checked){
                        gender = genderInput.value;
                    }
                })
                let major = $("#stuAddForm select[name='major']").val();
                let birthday = $("#stuAddForm input[name='birthday']").val();

                let params = {"sname":sname,"age":age,"gender":gender,"major":major,"birthday":birthday};

                console.log('添加的请求参数--',params);
                //发送添加请求
                $.ajax({
                    type: 'post',
                    url: '/stu',
                    data: JSON.stringify(params),
                    contentType: 'application/json',
                    success: function (resData){
                        console.log('添加结果---',resData);
                        if(resData.msg == "success"){
                            //更新数据 重新查询第一页
                            getByPage();

                            //清空表单
                            $("#stuAddForm").get(0).reset();

                            //关闭对话框  display: none
                            $("#addDialog").hide();
                        }
                    }
                })

            })


            //********************提交修改的表单******************************************
            $("#stuUpdateBt").click(function (){

                //收集参数
                let sname = $("#stuUpdateForm input[name='sname']").val();
                let age = $("#stuUpdateForm input[name='age']").val();
                let gender = 0;
                $("#stuUpdateForm input[name='gender']").each(function (index,genderInput){
                    if(genderInput.checked){
                        gender = genderInput.value;
                    }
                })
                let major = $("#stuUpdateForm select[name='major']").val();
                let birthday = $("#stuUpdateForm input[name='birthday']").val();
                let id = $("#stuUpdateForm input[name='id']").val();

                let params = {"id":id,"sname":sname,"age":age,"gender":gender,"major":major,"birthday":birthday};

                console.log('修改的请求参数--',params);

                //发起修改请求
                $.ajax({
                    type: 'put',
                    url: '/stu',
                    data: JSON.stringify(params),
                    contentType: 'application/json',
                    success: function(resData){

                        if(resData.msg == "success"){
                            getByPage();

                            //清空修改的表单

                            //关闭修改的对话框
                            $("#updateDialog").hide();

                        }

                    }
                })

            })

            //-----------------编写一个专门用来做分页查询的方法  可以重复调用--------------------
            function getByPage(pageNow=1,pageSize=5){

                $.ajax({
                    type: 'post',
                    url: '/stu/page',
                    data: JSON.stringify({'pageNow':pageNow,'pageSize':pageSize}),  //将json对象转成json字符串
                    contentType: 'application/json',  //请求参数为json
                    success: function(resData){
                        console.log(resData);

                        //拿到学生集合数据
                        let rowDatas = resData.data.rowData;

                        //循环学生集合数据
                        //先清空table中的数据再去追加
                        $("#stuTable>tbody").html('')
                        $(rowDatas).each(function (index,stu) {

                            let rowHtml = "<tr>\n" +
                                "                    <td>"+stu.id+"</td>\n" +
                                "                    <td>"+stu.sname+"</td>\n" +
                                "                    <td>"+stu.age+"</td>\n" +
                                "                    <td>"+(stu.gender==0?"男":"女")+"</td>\n" +
                                "                    <td>"+stu.major+"</td>\n" +
                                "                    <td>"+stu.birthday+"</td>\n" +
                                "                    <td><button class='updateBt' lang='"+stu.id+"'>修改</button><button class='delBt' lang='"+stu.id+"'>删除</button></td>\n" +
                                "                </tr>";


                            $("#stuTable>tbody").append(rowHtml);

                        })

                        //修改按钮的监听  发起修改
                        $(".updateBt").click(function (){

                            //1、显示修改的对话框
                            $("#updateDialog").show();

                            //2、在对话框中回显数据  根据修改按钮所在行的id来进行查询
                            let id = $(this).attr("lang");
                            $.ajax({
                                type: 'get',
                                url: '/stu/'+id,
                                success: function(resData){
                                    console.log('通过id查询的结果---',resData);

                                    let stu = resData.data;

                                    //获取修改表单中的input  将resData对象中的属性值对应填入
                                    $("#stuUpdateForm input[name='sname']").val(stu.sname);
                                    $("#stuUpdateForm input[name='age']").val(stu.age);
                                    $("#stuUpdateForm select[name='major']").val(stu.major);
                                    $("#stuUpdateForm input[name='birthday']").val(stu.birthday);


                                    $("#stuUpdateForm input[name='gender']").each(function (index,genderInput) {
                                        if(genderInput.value == stu.gender){
                                            genderInput.checked = true;
                                        }
                                    });

                                    // console.log($("#stuUpdateForm input[name='gender']"));

                                    $("#stuUpdateForm input[name='id']").val(stu.id);


                                }
                            })

                        })

                        //删除按钮的监听
                        $(".delBt").click(function (){

                            let isDel = confirm("您确定要删除吗？");
                            console.log(isDel);

                            if(isDel){

                                //获取当前正在点击的删除按钮的id  lang属性的值
                                let id = $(this).attr("lang");

                                $.ajax({
                                    type: 'delete',
                                    url: '/stu/'+id,
                                    success: function (resData){
                                        console.log('删除结果---',resData);

                                        if(resData.msg == "success"){
                                            getByPage();
                                        }

                                    }
                                })

                            }

                        })


                        //获取页码
                        let totalPages = resData.data.totalPages;

                        //循环页码，放入ul中
                        $(".pageUl").html('');
                        for(let page = 1; page <= totalPages;page++){

                            //判断一下是否当前页
                            if(page == pageNow){
                                $(".pageUl").append("<li><a href='javascript:;' class='now pageBt'>"+page+"</a></li>");
                                continue;
                            }

                            $(".pageUl").append("<li><a href='javascript:;' class='other pageBt'>"+page+"</a></li>");
                        }

                        //添加页码的点击监听  必须在页码已经更新到页面之后才可以添加
                        $(".pageBt").click(function(){
                            //this指的是当前正在点击的这个页码按钮
                            let pageNumber = $(this).text();
                            // alert('您要访问第'+pageNumber+'页');

                            if(pageNumber == pageNow){
                                return;
                            }

                            //调用查询的方法查询目标页即可
                            getByPage(pageNumber);
                        })

                    }
                })

            }

            //*************页面加载完毕 调用查询的方法 查询第一页的数据*************
            getByPage();
        })

    </script>
</body>
</html>